<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flex-container {
      width: 600px;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }
    .flex-item:nth-child(2n + 1) {
      width: calc(50% - 1px);
      height: 200px;
      border-right: 2px solid skyblue;
      position: relative;
      padding-top: 20px;
    }
    .flex-item:nth-child(2n) {
      width: calc(50% - 1px);
      height: 200px;
      padding-top: 20px;
      align-self: flex-end; /* 交叉轴结束位置 */
      border-left: 2px solid skyblue;
      position: relative;
    }
  
    .flex-item:nth-child(2n + 1)::before,
    .flex-item:nth-child(2n)::before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  
    .flex-item:nth-child(2n + 1)::before {
      border-left-color: skyblue;
      right: -10px;
    }
    .flex-item:nth-child(2n)::before {
      border-right-color: skyblue;
      left: -10px;
    }
  
    .flex-item:nth-child(2n + 1) .content {
      margin-right: 10px;
      min-height: 200px;
      background-color: skyblue;
      border-radius: 5px;
    }
    .flex-item:nth-child(2n) .content {
      margin-left: 10px;
      min-height: 200px;
      background-color: skyblue;
      border-radius: 5px;
    }
  </style>
  
  <div class="flex-container">
    <div class="flex-item">
      <div class="content"></div>
    </div>
    <div class="flex-item">
      <div class="content"></div>
    </div>
    <div class="flex-item">
      <div class="content"></div>
    </div>
    <div class="flex-item">
      <div class="content"></div>
    </div>
  </div>
</html>